<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Expenses-record</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="format-detection" content="email=no,address=no,telephone=no" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/mediaFize.js"></script>
<script type="text/javascript" src="../js/util.js"></script>
<script type="text/javascript" src="../js/swiper-3.4.0.min.js"></script>
<script type="text/javascript" src="../js/weui.min.js"></script>
<script type="text/javascript" src="../js/timer.js"></script>
<link type="text/css" rel="stylesheet" href="../css/home.css" />
<link type="text/css" rel="stylesheet" href="../css/swiper-3.4.0.min.css" />
<link type="text/css" rel="stylesheet" href="../css/weui.min.css" />
<link type="text/css" rel="stylesheet" href="css/record.css" />
<style>
	#pageSwaper{
		padding-bottom: .1rem;
	}
</style>
</head>
<body>
<div id="pageSwaper">
	<div class="record_list_bg">
		<div class="input_bg">
			<div class="input">
	    		<input type="text" class="record" value="夏磊" readonly="readonly" onfocus="this.blur()"/>
	    	</div>
	    	<div class="input type">
	    		<input type="text" class="type" id="form_type" placeholder="请填写使用事项" value="" readonly="readonly" onfocus="this.blur()"/>
	    		<i class="icon"></i>
	    	</div>
	    	<div class="input">
	    		<input type="numble" class="money" placeholder="使用金额" value="" pattern="[0-9]*"/>
	    	</div>
	    	<div class="input date ma_expect_date">
	    		<input type="text" class="date" placeholder="请输入使用时间" value="" readonly="readonly" onfocus="this.blur()"/>
	    		<i class="icon"></i>
	    	</div>
	    	<div class="choose_area clearfix">
	    		<div class="title">请选择消费人 : </div>
        		<a href="javascript:void(0);" class="step">
        			<i class="check"></i>
        			<span>熊聪</span>
        		</a>
        		<a href="javascript:void(0);" class="step">
        			<i class="check"></i>
        			<span>彭文</span>
        		</a>
        		<a href="javascript:void(0);" class="step">
        			<i class="check"></i>
        			<span>潘鸿飞</span>
        		</a>
        		<a href="javascript:void(0);" class="step">
        			<i class="check"></i>
        			<span>操文健</span>
        		</a>
        		<a href="javascript:void(0);" class="step">
        			<i class="check"></i>
        			<span>夏磊</span>
        		</a>
	        </div>
	    	<div class="textarea" id="wordCount">
	    		<textarea placeholder="请输入备注描述限制50字"></textarea>
	    		<span class="wordwrap"><var class="word">0</var>/50</span>
	    	</div>
	    	<div class="to_submit"><span>提&nbsp;&nbsp;交</span></div>
    	</div>
	</div>
	<div class="sure" style="display: none;">
		<div class="sure_bg">
			<p class="sure_title">请确认您要记录的账单信息</p>
			<ul>
				<li class="type">记录事项 : <span>洗发水</span></li>
				<li class="money">记录金额 : <span>XXXX</span></li>
				<li class="date">记录时间 : <span>2017/08/22</span></li>
				<li class="person">记录消费人 : 
					<span>
					</span>
				</li>
				<li class="textarea">备注 : <span>暂无</span></li>
			</ul>
			<p class="tip">请再次确认账单准确性，<br/>账单一经确认，概不可修改。</p>
			<div class="buttom">
				<div class="to_back"><span>返回修改</span></div>
				<div class="to_sure"><span>确认提交</span></div>
			</div>
		</div>
	</div>
</div>

<script>
	$(function(){
		$(".user_footer>ul>li").on("click",function(){
			var index=$(this).index();
			if(index==0){
				window.location.href="index.html";
			}else if(index==1){
				window.location.href="total.html";
			}
		})
		$(".choose_area").on('click','.step',function(){
		    $(this).find("i").toggleClass("active");
	    })
		//  消费事项
        $('#form_type').click(function(){
           var arr=['买菜','饮料',"聚餐吃饭","生活用品","电费","水费","外卖","其他"];
            weui.picker(creat(arr), {
                className: 'custom-classname',
                defaultValue: '北区',//默认显示
//                  取消
                onChange: function (result) {},
//                  确定
                onConfirm: function (result) {
                    $('#form_type').val(result[0].label);
                },
                id: 'singleLinePicker'
            });
        });
        function creat(arr){
            var mewArr=[];
            for(var i=0;i<arr.length;i++){
                mewArr[i]={};
                mewArr[i].label=arr[i];
                mewArr[i].value=i;
            }
            return mewArr;
        }
		//时间选择器
		$('.ma_expect_date').click(function(event) {
	        var _this = this;
	        weui.datePicker({
	            start: new Date().getFullYear(),
	            end: 2018,
	            defaultValue: [new Date().getFullYear(), new Date().getMonth()+1, new Date().getDate()],
	            onChange: function (result) {},
//                  确定
                onConfirm: function (result) {
                    $('.ma_expect_date>input').val(result[0]+"/"+result[1]+"/"+result[2]);
                },
	            id: 'ma_expect_date',
	            //className: 'ma_expect_date_picker'
	        });
	    });
	    $(".input_bg").on('click','.to_submit',function(){
		    //使用事项
	        var type=$('.input .type').val();
	        if(type==''){
	        	showMaskEditCom({text: "请输入您的记录事项",duration: 1500});
	        	return false;
	        }
	        //金额
	        var isNum=/^(0(?:[.](?:[1-9]\d?|0[1-9]))|[1-9]\d*(?:[.]\d{1,2}|$))$/;
	        var money=$('.input .money').val();
	        if(money==''){
	        	showMaskEditCom({text: "请输入您的记录金额",duration: 1500});
	        	return false;
	        }
	        if(isNum.test(money)==false){
	        	showMaskEditCom({text: "请输入正确的记录金额",duration: 1500});
	        	return false;
	        }
	        //日期
	        var date=$('.input .date').val();
	        if(date==''){
	        	showMaskEditCom({text: "请输入记录日期",duration: 1500});
	        	return false;
	        }
	        var flag=$(".choose_area>.step").find("i").hasClass("active");
	        if(!flag){
	        	showMaskEditCom({text: "请选择消费人",duration: 1500});
	        	return false;
	        }
	        //备注
	        var txt=$('.textarea>textarea').val();
	        if(txt==''){
	        	showMaskEditCom({text: "请输入记录备注",duration: 1500});
	        	return false;
	        }
	        
	        $('.sure').show();
	        show();
	    })
	    function show(){
	    	var arr=[];
	    	$(".input>input").forEach(function(){
	    		$(".sure .type>span").text($(".input .type").val());
	    		$(".sure .money>span").text($(".input .money").val());
	    		$(".sure .date>span").text($(".input .date").val());
	    	});
	    	var length=$(".choose_area .step").size();
	    	for(var i=0;i<length;i++){
	    		if($(".choose_area .step").eq(i).find("i").hasClass("active")){
	    			var name=$(".choose_area .step").eq(i).find("span").text();
	    			arr.push(name);
	    		}
	    	}
	    	$(".sure .person>span").text(arr.toString());
	    	$(".sure .textarea>span").text($(".textarea>textarea").val())
	    }
	    $(".sure").on("click",".to_back",function(){
	    	$(".sure").hide();
	    })
	    //先选出 textarea 和 统计字数 dom 节点
        var wordCount = $("#wordCount"),
            textArea = wordCount.find("textarea"),
            word = wordCount.find(".word");
        //调用
        statInputNum(textArea,word);
        //剩余字数统计
        function statInputNum(textArea,numItem) {
            var max = 50,
            curLength;
            textArea[0].setAttribute("maxlength", max);
            curLength = textArea.val().length;
            numItem.text(curLength);
            textArea.on('input propertychange', function () {
                numItem.text($(this).val().length);
            });

        }
	});
</script>
</body>
</html>
